<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>列表</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/list.css">
</head>
<body>
  <!-- loading效果 -->
  <section class="loading-box">
    <div class="loading">
      <img src="./images/loading.gif" alt="">
      <p>请横屏使用哦(✪ω✪)~</p>
    </div>
  </section>


  <div class="container">
    <div class="nav">
      <h3>列表展示</h3>
      <p>LIST</p>
    </div>
    <ul id="list">
      <!-- <li>
        <img src="./images/list-banner.png" alt="">
        <article class="list-txt">
          <h3>有氧运动</h3>
          <p>
            包括包括包括包括包括包括包括包括包括包括包括包括包括包括包括包括包括包括
            
          </p>
        </article>
      </li>
      <li>
        <img src="./images/list-banner.png" alt="">
        <article class="list-txt">
          <h3>有氧运动</h3>
          <p>包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，</p>
        </article>
      </li>
      <li>
        <img src="./images/list-banner.png" alt="">
        <article class="list-txt">
          <h3>有氧运动</h3>
          <p>包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，</p>
        </article>
      </li>
      <li>
        <img src="./images/list-banner.png" alt="">
        <article class="list-txt">
          <h3>有氧运动</h3>
          <p>包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，</p>
        </article>
      </li> -->
    </ul>
    
      <img src="./images/back.png" id="back">

  </div>

  <!-- template模板 -->
  <script type="text/html" id="template">
    {{ each data as value i }}
    <li data-list-id="{{value.id + '-' + value.categoryId}}">
        <img src="{{value.image}}" alt="">
        <div class="list-txt">
          <div class="circle">{{i + 1}}</div>
          <article>
            <h3>{{value.title}}</h3>
            <p>{{value.summary}}</p>
          </article>
        </div>
    </li>
    {{ /each }}
  </script>
  <script src="./js/zepto.js"></script>
	<script src="./lib/artTemplate-master/dist/template.js"></script>
  <script>
    onload = function() {
      $('.loading-box').css('display', 'none')
    }
    $(function() {

      // 获取id参数
      var index = location.search.indexOf('=') + 1,
          id = parseInt(location.search.substr(index));

      $.ajax({
        type: 'get',
        url: 'https://supergeek.api.likedata.cn/activity/cms/detail?categoryId=' + id,
        success: (res) => {
          // console.log(res)
          if (res.success) {

            var html = template('template', res);
            $('.container ul').html(html)
            //渲染完毕后给每一项绑定事件跳转到详情页并将data数据存储到localStorage
            if ($('.container ul').html()) {
              $('#list li').on('click', function() {
                location.href = './detail.html?id=' + this.dataset['listId'];
              })
            }
          }
          
        }
      })


      //返回上一页面
      $('#back').on('click', function() {
        history.back();
      })
    })
  </script>
</body>
</html>